<template>
  <view>
    <!-- 状态栏 -->
    <view class="status" :style="{position:headerPosition}"></view>
    <u-search v-model="keyword" :clearabled="true" maxlength=32 :showAction="false"></u-search>

    <view class="category-list">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view class="row" v-for="(category) in categoryL1" :key="category.id"
          :class="[category.id==showCategoryIndex?'on':'']" @tap="showCategory(category.id)">
          <view class="text">
            <view class="block"></view>
            {{category.item_name}}
          </view>
        </view>

      </scroll-view>
      <!-- 右侧子导航 -->
      <scroll-view scroll-y="true" class="right">
        <view class="category" v-for="(category) in categoryL1" :key="category.id"
          v-show="category.id==showCategoryIndex">
          <view class="banner">
            <image :src="category.banner"></image>
          </view>
          <view class="list">
            <view class="box" v-for="(c) in getListForCate(category.id)" :key="c.id" @tap="toCategory(c)">
              <image :src="c.icon_url"></image>
              <view class="text">{{c.item_name}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
  //高德SDK
  // import amap from '@/common/SDK/amap-wx.js';
  // import frontCategoryService from '../../../service/front-category-service.js';

  export default {
    data() {
      return {
        showCategoryIndex: 0,
        headerPosition: "fixed",
        city: "北京",
        //分类列表
        categoryL1: [
          {
            id: 1,
            item_name: '推荐'
          },
          {
            id: 2,
            item_name: '禽畜肉蛋'
          },
          {
            id: 3,
            item_name: '水果'
          },
          {
            id: 4,
            item_name: '蔬菜'
          }
        ],
        categoryL2: [],
        categoryL3: [],
        keyword: '',
      }
    },
    onPageScroll(e) {
      //兼容iOS端下拉时顶部漂移
      if (e.scrollTop >= 0) {
        this.headerPosition = "fixed";
      } else {
        this.headerPosition = "absolute";
      }
    },
    onLoad() {
      // this.getCategories();
    },
    methods: {
      getListForCate(id) {
        let arr = [];
        this.categoryL2.forEach(item => {
          if (item.parent == id) {
            arr.push(item);
          }
        });
        return arr;
      },
      async getCategories() {
        var that = this;
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        try {
          const result = await frontCategoryService.getFrontCategories(null, 1);
          console.log(result);
          result.forEach((item) => {
            if (item.level == 1) {
              arr1.push(item);
            }
            if (item.level == 2) {
              arr2.push(item);
            }
            if (item.level == 3) {
              arr3.push(item);
            }
          });
          that.categoryL1 = arr1;
          that.showCategoryIndex = arr1[0].id;
          that.categoryL2 = arr2;
          that.categoryL3 = arr3;
        } catch (e) {
          console.log(e);
        }
      },
      //消息列表
      toMsg() {
        uni.navigateTo({
          url: '../../msg/msg'
        })
      },
      //分类切换显示
      showCategory(index) {
        this.showCategoryIndex = index;
      },
      toCategory(e) {
        // uni.setStorageSync('catName',e.item_name);
        uni.navigateTo({
          url: '../../goods/goods-list/goods-list?cid=' + e.cid + '&name=' + e.item_name
        });
      },
      //搜索跳转
      toSearch() {
        uni.showToast({
          title: "建议跳转到新页面做搜索功能"
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .status {
    width: 100%;
    height: 0;
    position: fixed;
    z-index: 10;
    background-color: #fff;
    top: 0;
    /*  #ifdef  APP-PLUS  */
    height: var(--status-bar-height); //覆盖样式
    /*  #endif  */

  }

  .header {
    width: 92%;
    padding: 0 4%;
    height: 100upx;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: #fff;
    box-sizing: content-box;
    /*  #ifdef  APP-PLUS  */
    top: var(--status-bar-height);
    /*  #endif  */

    .addr {
      width: 120upx;
      height: 60upx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      font-size: 28upx;

      .icon {
        height: 60upx;
        margin-right: 5upx;
        display: flex;
        align-items: center;
        font-size: 42upx;
        color: #ffc50a;
      }
    }

    .input-box {
      width: 100%;
      height: 60upx;
      background-color: #f5f5f5;
      border-radius: 30upx;
      position: relative;
      display: flex;
      align-items: center;

      .icon {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 60upx;
        height: 60upx;
        font-size: 34upx;
        color: #c0c0c0;
      }

      input {
        padding-left: 28upx;
        height: 28upx;
        font-size: 28upx;
      }
    }

    .icon-btn {
      width: 60upx;
      height: 60upx;
      flex-shrink: 0;
      display: flex;

      .icon {
        width: 60upx;
        height: 60upx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 42upx;
      }
    }
  }

  .place {

    background-color: #ffffff;
    height: 100upx;
    /*  #ifdef  APP-PLUS  */
    margin-top: var(--status-bar-height);
    /*  #endif  */
  }

  .category-list {
    width: 100%;
    background-color: #fff;
    display: flex;

    .left,
    .right {
      position: absolute;

      top: 100upx;
      /*  #ifdef  APP-PLUS  */
      top: calc(100upx + var(--status-bar-height));
      /*  #endif  */
      bottom: 0upx;
    }

    .left {
      width: 24%;
      left: 0upx;
      background-color: #f2f2f2;

      .row {
        width: 100%;
        height: 90upx;
        display: flex;
        align-items: center;

        .text {
          width: 100%;
          position: relative;
          font-size: 28upx;
          display: flex;
          justify-content: center;
          color: #3c3c3c;

          .block {
            position: absolute;
            width: 0upx;
            left: 0;
          }
        }

        &.on {
          height: 100upx;
          background-color: #fff;

          .text {
            // font-size: 30upx;
            // font-weight: 600;
            color: #fa436a;

            .block {
              width: 10upx;
              height: 80%;
              top: 10%;
              background-color: #f06c7a;
            }
          }
        }
      }
    }

    .right {
      width: 76%;
      left: 24%;

      .category {
        width: 94%;
        padding: 20upx 3%;

        .banner {
          width: 100%;
          height: 24.262vw;
          border-radius: 10upx;
          overflow: hidden;
          box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);

          image {
            width: 100%;
            height: 24.262vw;
          }
        }

        .list {
          margin-top: 40upx;
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .box {
            width: calc(71.44vw / 3);
            margin-bottom: 30upx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            image {
              width: 60%;
              height: calc(71.44vw / 3 * 0.6);
            }

            .text {
              margin-top: 5upx;
              width: 100%;
              display: flex;
              justify-content: center;
              font-size: 26upx;
            }
          }
        }
      }
    }
  }
</style>